<template>
  <CompBox title="稼动率统计">
    <div class="comp-box">
      <div class="comp-box-left">
        <div v-for="i in deviceTypeUtilization">
          <p>{{ i.label }}</p>
          <p>{{ (i.utilizationAVG * 100).toFixed(2) + '%' }}</p>
        </div>
      </div>
      <div class="comp-box-pie">
        <p>稼动率</p>
        <div id="yuncut-rate-pie" style="width: 150px;height: 150px"></div>
      </div>
      <!--      <div class="comp-box-pie">-->
      <!--        <p>行业稼动率</p>-->
      <!--        <div id="comm-rate-pie" style="width: 150px;height: 150px"></div>-->
      <!--      </div>-->
    </div>
  </CompBox>
</template>

<script setup>
import CompBox from "@/views/screen/component/CompBox.vue"
import * as echarts from "echarts";
import {getCurrentInstance, nextTick, onMounted, toRaw, watch} from "vue";
import {useDict} from "../../../utils/dict";

const props = defineProps({
  devs: Array,
})
const deviceTypeUtilization = ref([])
const {proxy} = getCurrentInstance();
const {device_cut_type} = useDict('device_cut_type')

onMounted(() => {
  getTypeUtilization(device_cut_type.value)
  initChart()
})
watch(device_cut_type, (device_cut_type, oldValue) => {
  getTypeUtilization(device_cut_type)
  initChart()
})
watch(()=>props.devs,()=>{
  getTypeUtilization(device_cut_type.value)
  initChart()
})
let option = {
  title: {
    text: '10%',
    top: 'middle',
    left: 'center',
    textStyle: {
      fontSize: 16,
      color: "#ffffff"
    },
  },
  tooltip: {
    trigger: "item"
  },
  series: [
    {
      name: '',
      type: 'pie',
      radius: ['55%', '70%'],
      color: ["#01B0F1", "rgba(78, 138, 160, 0.2)", "pink"],
      avoidLabelOverlap: false,
      label: {
        normal: {
          show: false,
          position: 'center'
        },
        emphasis: {
          show: false,
          textStyle: {},

        }
      },
      labelLine: {
        normal: {
          show: false
        }
      },
      zlevel: 1,
      data: [{name: '在线', value: 100}, {name: '离线', value: 50}]
    },
  ]
}

async function getTypeUtilization(device_cut_type) {
  const typeValue = {}
  props.devs.forEach((item) => {
    const type = item.type
    const utilization = parseFloat(item.utilization?item.utilization:'0')
    if (typeValue[type]) {
      typeValue[type].utilization += utilization
      typeValue[type].count++
    } else {
      typeValue[type] = {
        utilization: utilization,
        count: 1
      }
    }
  })
  deviceTypeUtilization.value.length = 0
  device_cut_type.forEach((item) => {
    deviceTypeUtilization.value.push({
      utilizationAVG: typeValue[item.value] ? typeValue[item.value].utilization / typeValue[item.value].count : 0,
      label: item.label
    })
  })
}

function initChart() {
  let sum = 0
  props.devs.forEach((i)=>{
    sum +=  parseFloat(i.utilization)
  })
  let totalUtil =  (sum/props.devs.length).toFixed(5)
  const e1 = echarts.init(document.getElementById('yuncut-rate-pie'))
  // const e2 = echarts.init(document.getElementById('comm-rate-pie'))
  option.series[0].name = '稼动率'
  option.series[0].data = [{name: '总稼动率', value: totalUtil}, {name: '空置率', value: 1 - totalUtil}]
  option.title.text = (totalUtil*100).toFixed(2)+'%'
  const e1option = Object.assign({}, option)
  // option.series[0].name = '行业稼动率'
  // option.series[0].data = [{name: '总稼动率', value: 50}, {name: '空置率', value: 50}]
  // const e2option = Object.assign({},option)
  e1.setOption(e1option)
  // e2.setOption(e2option)
}

</script>

<style scoped>
.comp-box-left {
  width: 30%;
  height: 100%;
  color: #32EBCA;
  text-align: center;
}

.comp-box-pie {
  height: 100%;
}

.comp-box-pie p {
  color: #01B0F1;
  font-size: 15px;
  text-align: center;
}

.comp-box {
  width: 100%;
  height: 100%;
  padding-top: 28px;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}
</style>